// delay 可以延迟observable 一开始发送元素的时间点，范例如下
// const source1 = Rx.Observable.interval(300).take(5);

// const example1 = source1.delay(500);

// example1.subscribe({
//     next: (value) => { console.log(value); },
//     error: (err) => { console.log('Error: ' + err); },
//     complete: () => { console.log('complete'); }
// });
/* 
    source : --0--1--2--3--4|
        delay(500)
    example: -------0--1--2--3--4|
*/

// const source2 = Rx.Observable.interval(500).take(5);

// var example2 = source2.delay(new Date(new Date().getTime() + 1000));

// example2.subscribe({
//     next: (value) => { console.log(value); },
//     error: (err) => { console.log('Error: ' + err); },
//     complete: () => { console.log('complete'); }
// });


/* 
    delayWhen 的作用跟delay 很像，最大的差别是delayWhen 可以影响每个元素，而且需要传一个callback 并回传一个observable，范例如下
*/
const source3 = Rx.Observable.interval(500).take(5);

const example3 = source3
                    .delayWhen(
                        x => {
                            return Rx.Observable.empty().delay(100 * x * x)
                        }
                    );
                        
example3.subscribe({
    next: (value) => { console.log(value, 'next'); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
/* 
    source : --0--1--2--3--4|
    .delayWhen(x => Rx.Observable.empty().delay(100 * x * x));
    example: -----1----2-----3-----4|
*/

/* 实现一个 一堆图片随鼠标位置移动的案例 */

const imgList = document.getElementById('imgChild').children;
// 返回鼠标移动位置
const movePos = Rx.Observable.fromEvent(document, 'mousemove')
        .map(e => ({ x: e.clientX, y: e.clientY }))

function followMouse(DOMArr) {
  const delayTime = 600;
  DOMArr.forEach((item, index) => {
    movePos
        .delay(delayTime * (Math.pow(0.65, index) + Math.cos(index / 4)) / 2)
        .subscribe(function (pos) {
            item.style.transform = 'translate3d(' + pos.x + 'px, ' + pos.y + 'px, 0)';
        });
    });
}

followMouse(Array.from(imgList))